<template>
    <scroll-view scroll-y @scroll="scroll" class="scrolly">

        <view class="warp">
            <view class="nav" :class="headerActive ? 'act' : ''">
                <view class="back">
                    <u-icon size="25" name="arrow-left" color="#fff" @click="back"></u-icon>
                </view>
                <view class="nav_contner">
                    <view :class="header_active == 0 ? 'act' : ''" @click="change_item(0)">商品</view>
                    <view :class="header_active == 1 ? 'act' : ''" @click="change_item(1)">评论</view>
                    <view :class="header_active == 2 ? 'act' : ''" @click="change_item(2)">详情</view>


                </view>
                <view class="nav_img">
                    <u-icon size="25" name="shopping-cart" color="#fff" @click="get_cart"></u-icon>
                </view>
            </view>
            <view class="swiper-wrapper">
                <swiper indicator-dots autoplay circular>
                    <swiper-item v-for="(item, index) in detail.banner" :key="index">
                        <img class="img_v" :src="item" alt="">
                    </swiper-item>
                </swiper>
            </view>
            <view class="commodity">
                <view class="pirce"> <text class="newpirce">￥{{ detail.price }}</text><text class="oldpirce">￥{{
                    detail.old_price
                }}</text> </view>
                <view class="commodity_name">{{ detail.name }}</view>
                <view class="comm_warp"><text class="express">快递:包邮</text><text class="work_off">月销{{
                    detail.sales
                }}</text></view>
            </view>
            <!-- 评价 -->
            <view class="evaluate">
                <view class="evaluate_a">评价({{ count }})</view>
                <view class="more">查看更多</view>
            </view>
            <view class="img_text">
                <view class="it">图文详情</view>
                <view class="content"><rich-text :nodes="detail.desc"></rich-text></view>
                <!-- <view v-html="detail.desc" class="getdel"></view> -->
            </view>

            <view class="footer">
                <view class="collect">
                    <u-icon name="heart-fill" :color="is_fav == 0 ? '#999999' : 'red'" size="28" @click="collect"></u-icon>
                    <view>收藏</view>
                </view>
                <view class="add_cart" @click="show = true">加入购物车</view>
                <view class="buy_immed" @click="buy">立即购买</view>
            </view>
            <u-popup :show="show" mode="bottom" closeable @close="close">
                <view class="popup">
                    <view class="popup_warp">
                        <view class="image_warp">
                            <image :src="detail.img" mode="scaleToFill" />
                        </view>
                        <view class="popup_contner">
                            <view class="popup_price">￥{{ sku_info.price }}</view>
                            <view class="popup_stock">库存:{{ sku_info.stock }}</view>
                            <view class="popup_text">已选:暂无属性</view>
                        </view>
                    </view>
                    <view class="select_specification">
                        <view class="specification" v-for="(item, index) in attr" :key="index">
                            <view class="specification_name">{{ item.text }}</view>
                            <view class="specification_contner">
                                <view class="spec_list" :class="item.checked == index1 ? 'act' : ''"
                                    v-for="(item1, index1) in item.values" :key="index1" @click="get_select(index, index1)">
                                    {{
                                        item1.text
                                    }}</view>
                                <!-- <view class="spec_list">白色</view>
                                                        <view class="spec_list">棕色</view> -->
                            </view>
                        </view>
                    </view>
                    <view class="popup_footer">
                        <view class="popup_count">数量</view>
                        <view><u-number-box v-model="value" @change="valChange"></u-number-box></view>
                    </view>
                    <view class="confirm" @click="confirm">确定</view>
                </view>
            </u-popup>
        </view>
    </scroll-view>
</template>

<script>
import { get_goods_detail, get_toggle_fav, get_sku, get_add_cart, get_goods_comment } from "../../api/api"
export default {
    data() {
        return {
            id: '',
            uid: uni.getStorageSync('uid'),
            detail: [],
            headerActive: false,
            is_fav: 0,
            header_active: 0,
            height1: 0,
            height2: 0,
            scrollTop: 0,
            show: false,
            value: 1,
            attr: [],
            sku_info: {},
            skus: [],
            type: '',
            count: 0,


        }
    },
    onLoad(options) {
        this.id = options.id
    },
    mounted() {
        //获取商品详情
        get_goods_detail({
            goods_id: this.id,
            uid: this.uid
        }).then((res) => {
            console.log(res)
            this.detail = res.data[0]
            this.attr = res.data[0].attr
            this.skus = res.data[0].default_sku_info.text
            this.sku_info = res.data[0].default_sku_info
            console.log(this.sku_info)
            console.log(this.skus)
            this.attr.forEach(v => {
                v.checked = 0; //选中的索引    默认为0
            });
        }).catch((err) => {

        });
        //获取商品评价
        get_goods_comment({
            goods_id: this.id,
            skip: 1,
            limit: 10,
        }).then(res => {
            console.log(res)
            this.count = res.count
        })

    },
    methods: {
        //
        scroll(e) {
            this.headerActive = e.target.scrollTop >= 60;

        },
        //点击导航nac
        change_item(index) {
            this.header_active = index;

            // this.scrollTop = this['height' + index] || 0

        },
        //收藏
        collect() {
            get_toggle_fav({
                goods_id: this.id,
                uid: this.uid,
                is_fav: this.is_fav
            }).then(res => {
                console.log(this.detail)
                if (!this.uid) {
                    console.log("请先登录")
                    setTimeout(() => {
                        uni.navigateTo({ url: '/pages/login/login' })
                    }, 2000)
                }
                if (res.code == 1) {
                    this.is_fav = res.is_fav;
                    console.log(res)
                }
            })
        },
        //步进器
        valChange(e) {
            console.log(e)
            this.value = e.value
        },
        //关闭弹出层
        close() {
            this.show = false
        },
        //弹出层选择规格
        get_select(index, index1) {
            console.log(index, index1)
            this.attr[index].checked = index1;
            this.$forceUpdate();

            this.sku()
        },
        //获取sku
        sku() {
            let skf = this.attr
                .map(v => {
                    return v.values[v.checked].text;
                })
            console.log(skf)
            get_sku({
                goods_id: this.id,
                sku: skf,
            }).then(res => {
                console.log(res.data)
                this.sku_info = res.data
                this.skus = res.data.text
                console.log(this.skus)
                console.log(this.sku_info.text)
            })


        },
        //确定加入购物车/购买
        confirm() {
            console.log(this.sku_info)
            get_add_cart({
                uid: this.uid,
                goods_id: this.id,
                num: this.value,
                attr: this.skus,
                type: this.type
            }).then(res => {
                console.log(res)

                if (!this.uid) {
                    console.log("请先登录")
                    setTimeout(() => {
                        uni.navigateTo({ url: '/pages/login/login' })
                    }, 2000)
                }
                this.show = false
                let cart_id = res.data.id
                let buy = this.type
                if (this.type == 'buy') {
                    uni.navigateTo({ url: '/pages/order/createOrder?cart_id=' + cart_id + '&buy=' + buy })
                }

            })
        },
        //立即购买
        buy() {
            this.show = true
            this.type = 'buy'


        },
        //返回上一级
        back() {
            uni.navigateBack({
                delta: 1
            })
        },
        //去购物车页面
        get_cart() {
            uni.switchTab({ url: '/pages/cart/cart' })
        }


    },

}
</script>

<style lang="scss" scoped>
.scrolly {

    height: 100vh;

    .warp {

        margin-bottom: 50px;

        .nav {
            position: fixed;
            top: 0;
            z-index: 999;
            width: 100%;
            height: 40px;
            display: flex;
            justify-content: space-around;
            align-items: center;
            background: rgba(0, 0, 0, 0);


            &.act {
                // background-color: #000;
                background-color: #fff;


                .nav_contner {
                    opacity: 1;
                }

                .back {
                    background-color: rgba(0, 0, 0, .4);
                }

                .nav_img {
                    background-color: rgba(0, 0, 0, .4);

                }

            }

            .back {
                width: 30px;
                height: 30px;
                background-color: #7f7f7f;
                border-radius: 50%;
                text-align: center;
                line-height: 30px;
            }

            .nav_contner {
                width: 56%;
                display: flex;
                justify-content: space-around;
                opacity: 0;



                view {
                    font-weight: bold;

                    &.act {
                        border-bottom: 2px solid #fdd100;
                        padding-bottom: 10px;
                    }
                }
            }

            .nav_img {
                width: 30px;
                height: 30px;
                background-color: #7f7f7f;
                border-radius: 50%;

                image {
                    width: 100%;
                    height: 100%;
                }
            }
        }

        .swiper-wrapper {
            width: 100%;


            swiper {
                width: 100%;
                height: 300px;
            }

            .img_v {
                width: 100%;
                height: 100%;
            }
        }

        .commodity {
            // width: 100%;
            margin: 10px 10px;
            background-color: #fff;

            .pirce {
                .newpirce {
                    font-size: 20px;
                    color: red;
                }

                .oldpirce {
                    font-size: 16px;
                    margin-left: 15px;
                    color: #ababab;
                    text-decoration: line-through
                }
            }

            .commodity_name {
                font-weight: 600;
                font-size: 18px;
                margin: 15px 0;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2; // 控制多行的行数
                -webkit-box-orient: vertical;
            }

            .comm_warp {
                display: flex;
                justify-content: space-between;
                color: #7d7d7d;
            }
        }

        .evaluate {
            // width: 100%;
            height: 40px;
            background-color: #fff;
            margin: 10px 10px;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .evaluate_a {
                font-size: 18px;
                font-weight: 600;


            }

            .more {
                font-size: 14px;
                color: #ababab;
            }
        }

        .img_text {
            width: 100%;
            background-color: #fff;
            padding-bottom: 50px;

            .it {
                font-size: 18px;
                font-weight: 600;
                margin-top: 10px;
                padding: 10px 10px;
            }

            .content {
                font-size: 0;

                img {
                    width: 100%;
                }

            }
        }

        .footer {
            width: 100%;
            height: 50px;
            background-color: #fff;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: fixed;
            bottom: 0;

            .collect {
                width: 20%;
                height: 100%;
                display: flex;
                flex-direction: column;
                flex-wrap: wrap;
                align-content: center;
            }

            .add_cart {
                width: 40%;
                height: 100%;
                background-color: #fdd100;
                text-align: center;
                line-height: 50px;
                color: #fff;

            }

            .buy_immed {
                width: 40%;
                height: 100%;
                background-color: #fb5248;
                color: #fff;
                text-align: center;
                line-height: 50px;
            }
        }

        .popup {

            .popup_warp {
                display: flex;
                justify-content: left;
                padding: 0 10px;
                // width: 100px;
                // height: 200px;

                .image_warp {
                    width: 130px;
                    height: 130px;
                    // position: relative;

                    image {
                        width: 130px;
                        height: 130px;
                        position: absolute;
                        top: -15px;


                    }
                }

                .popup_contner {
                    width: 130px;
                    height: 130px;
                    margin-left: 10px;

                    .popup_price {
                        color: red;
                        margin-top: 5px;
                    }

                    .popup_stock {
                        color: #ababab;
                        margin: 10px 0;
                    }

                    .popup_text {
                        color: #ababab;

                    }
                }

            }

            .select_specification {
                width: 100%;
                padding: 10px 10px;

                .specification_contner {
                    display: flex;
                    justify-content: start;

                    view {
                        margin-left: 20px;
                        margin-top: 5px;
                        background-color: #faf6f6;
                        padding: 2px 7px;
                        border-radius: 25px;
                        text-align: center;

                        &.act {
                            color: red;
                            background-color: #dfd1d1;
                        }
                    }
                }
            }

            .popup_footer {
                display: flex;
                justify-content: space-between;
                padding: 15px 10px;
            }

            .confirm {
                width: 100%;
                height: 40px;
                background-color: #fdd100;
                text-align: center;
                line-height: 40px;
                color: #000;
            }
        }
    }
}
</style>